import { useEffect, FC } from 'react';
import { View } from '@tarojs/components'
import './index.less'
import { AtForm, AtInput } from 'taro-ui'
import { useSetState } from '@hooks/index.ts'

type UserInfoType = {
  id_number_pre: string | number,
  id_number_suf: string | number,
  last_name: string,
  phone_pre: number,
  phone_suf: number
}

type Prop = {
  user_info: UserInfoType,
  onChange: (arg1: any, arg2: any) => void
}

const defaultUserInfo = {
  id_number_pre: '',
  id_number_suf: '',
  phone_pre: '',
  phone_suf: '',
  last_name: ''
}

const Index: FC<Prop> = ({ user_info, onChange }) => {
  const [userInfo, setUserInfo] = useSetState<UserInfoType>(defaultUserInfo)

  useEffect(() => {
    // 任何你需要在组件挂载时执行的副作用
    setUserInfo(user_info)
  }, [user_info]);

  const handleChange = (value1, value2) => {
    setUserInfo({
      ...userInfo,
      [value1]: value2
    })
    onChange(value1, value2)
  }

  return (
    <View className='singleAccountEdit'>
      <AtForm className='userInfoForm'>
        <AtInput
          name='last_name'
          title='姓名：'
          type='text'
          placeholder='请输入'
          value={userInfo.last_name as string}
          onChange={(value: string) => handleChange('last_name', value)}
        />
        <View className='idCardInfo'>
          <AtInput
            name='id_number_pre'
            title='身份证：'
            type='number'
            maxLength={3}
            placeholder='前三位'
            value={userInfo.id_number_pre as string}
            onChange={(value: string) => handleChange('id_number_pre', value)}
          />
          <AtInput
            name='id_number_suf'
            type='number'
            maxLength={4}
            placeholder='后四位'
            value={userInfo.id_number_suf as string}
            onChange={(value: string) => handleChange('id_number_suf', value)}
          />
        </View>
        <View className='phoneNumberInfo'>
          <AtInput
            name='phone_pre'
            title='手机号码：'
            type='number'
            maxLength={3}
            border={false}
            placeholder='前三位'
            value={userInfo.phone_pre as unknown as string}
            onChange={(value: string) => handleChange('phone_pre', value)}
          />
          <AtInput
            name='phone_suf'
            type='number'
            maxLength={4}
            placeholder='后四位'
            value={userInfo.phone_suf as unknown as string}
            onChange={(value: string) => handleChange('phone_suf', value)}
            border={false}
          />
        </View>
      </AtForm>
    </View>
  );
};

export default Index;
